slider: Cache slider width for dragging handlers

The actor allocation will be invalid on CLUTTER_TOUCH_BEGIN, because
it comes together with a CLUTTER_ENTER event that will recalculate
styles, and queue a relayout in result.

The net result is that on CLUTTER_TOUCH_BEGIN, the relayout has been
already queued, so the slider width comes up as 0, and the value ends
up as 1. Later touch events already happen on a validated actor, so
it is corrected. Still, not fun when modifying the volume slider on a
touchscreen.

diff --git a/js/ui/slider.js b/js/ui/slider.js
index 02dbfae79852e68e46b03b515b5e71f71fa970fe..fbd28bd5dd5a49503cf37e48a3e46ee25596227b 100644 (file)
--- a/js/ui/slider.js
+++ b/js/ui/slider.js
@@ -17,6 +17,7 @@ const Slider = new Lang.Class({
             // Avoid spreading NaNs around
             throw TypeError('The slider value must be a number');
         this._value = Math.max(Math.min(value, 1), 0);
+        this._sliderWidth = 0;
 
         this.actor = new St.DrawingArea({ style_class: 'slider',
                                           can_focus: true,
@@ -27,6 +28,9 @@ const Slider = new Lang.Class({
         this.actor.connect('touch-event', Lang.bind(this, this._touchDragging));
         this.actor.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
         this.actor.connect('key-press-event', Lang.bind(this, this.onKeyPressEvent));
+        this.actor.connect('allocation-changed', (actor, box) => {
+            this._sliderWidth = box.get_width();
+        });
 
         this._releaseId = this._motionId = 0;
         this._dragging = false;
@@ -242,7 +246,7 @@ const Slider = new Lang.Class({
         relX = absX - sliderX;
         relY = absY - sliderY;
 
-        let width = this.actor.width;
+        let width = this._sliderWidth;
         let handleRadius = this.actor.get_theme_node().get_length('-slider-handle-radius');
 
         let newvalue;